<!--
 * @Author: boyyang
 * @Date: 2022-02-01 20:10:39
 * @LastEditTime: 2022-03-18 21:50:09
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\setting\index.vue
-->

<template>
    <div class="setting" v-show="isHidden" @click="close">
        <div :class="['setting-box', { 'setting-box-anima': !props.isShow }]" @click.stop>
            <div class="title">{{ isVideo ? "视频背景" : "图片背景" }}</div>
            <div class="bg-img" v-if="imgUrl != ''">
                <video :src="imgUrl" autoplay muted loop v-if="isVideo"></video>
                <img :src="imgUrl" v-else @error="imgErr" ref="imgerr" />
            </div>
            <i class="iconfont icon-error close-icon" @click="close"></i>
            <i class="iconfont icon-qiehuangongsi change-icon" @click="change"></i>
            <div class="change-bg">
                <custom-upload :file-size="fileSize" :file-type="fileType" @onChange="imgChange">
                    <tool-tip :text="isVideo ? '上传视频做为背景' : '上传图片做为背景'">
                        <template #icon>
                            <i class="iconfont icon-bofang6 upload-icon" v-if="isVideo"></i>
                            <i class="iconfont icon-tupian1 upload-icon" v-else></i>
                        </template>
                    </tool-tip>
                </custom-upload>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { userMes, upload, findDataByOpenId, addOneData, updateOneDataByOpenId } from '@/cloudbase'
import { useLoading } from '../fullScreenLoading'
import { useMessage } from '../message'
interface ISettingProps {
    isShow?: boolean;
    url?: string;
    type?: string;
}

interface ISettingEmits {
    (e: 'update:isShow', val: boolean): void;
    (e: 'reflesh'): void
}

const props = withDefaults(defineProps<ISettingProps>(), {
    isShow: false
})

const emits = defineEmits<ISettingEmits>()

const message = useMessage()
const loading = useLoading()
const userInfo = userMes()

const isHidden = ref<boolean>(false)
const imgUrl = ref<string>('')
const fileType = ref<string>('image/*')
const fileSize = ref<number>(6)
const isVideo = ref<boolean>(false)
const imgerr = ref<any>(null)


watch(
    [
        () => props.isShow,
        () => props.url,
        () => props.type
    ],
    (
        [n_isshow, n_url, n_type],
        [o_isshow, o_url, o_type]
    ) => {
        if (n_url) {
            imgUrl.value = n_url
        }

        if (n_type == 'video') {
            isVideo.value = true
        } else {
            isVideo.value = false
        }

        if (!n_isshow) {
            setTimeout(() => {
                isHidden.value = n_isshow
            }, 1000);
        } else {
            isHidden.value = n_isshow
        }
    })


const close = () => {
    emits('update:isShow', false)
}

const change = () => {
    isVideo.value = !isVideo.value

    if (isVideo.value) {
        fileType.value = 'video/mp4'
        fileSize.value = 500
    } else {
        fileType.value = 'image/*'
        fileSize.value = 6
    }
}

const imgChange = (e: any) => {
    loading.start()
    imgUrl.value = e.tempUrl

    upload(e.file, 'usersBg', 'userBg').then((res: any) => {
        findDataByOpenId('users', userInfo?.uid as string).then((result) => {
            if (result.data.length !== 0) {
                updateOneDataByOpenId('users', userInfo?.uid as string, {
                    download_url: res.download_url,
                    tempFileURL: res.tempFileURL,
                    fileID: res.fileID,
                    filePath: res.filePath,
                    create_time: new Date().getTime(),
                    type: isVideo.value ? 'video' : 'image'
                }).then((res) => {
                    loading.end()
                    message.success('修改背景成功')
                    emits('reflesh')
                })
            } else {
                addOneData('users', {
                    uid: userInfo?.uid,
                    email: res.email,
                    download_url: res.download_url,
                    tempFileURL: res.tempFileURL,
                    fileID: res.fileID,
                    filePath: res.filePath,
                    create_time: new Date().getTime(),
                    name: res.name,
                    type: isVideo.value ? 'video' : 'image'
                }).then((res) => {
                    loading.end()
                    message.success('修改背景成功')
                    emits('reflesh')
                })
            }
        })

    })



}

const imgErr = () => {
    imgerr.value.src = userInfo?.avatarUrl as string
}

</script>

<style scoped lang="scss">
.setting {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0;

    background-color: rgba(0, 0, 0, 0.5);

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    z-index: 9;

    .setting-box {
        box-sizing: border-box;
        width: 700px;
        height: 450px;
        background-color: rgba(107, 104, 130, 0.5);

        border-radius: 6px;

        box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);

        position: relative;

        // overflow: hidden;

        .close-icon {
            position: absolute;
            right: 10px;
            top: 10px;

            font-size: 20px;
            font-weight: bold;

            color: whitesmoke;

            cursor: pointer;

            &:hover {
                color: rgb(247, 149, 149);
            }
        }

        .change-icon {
            position: absolute;
            top: 10px;
            left: 10px;

            cursor: pointer;
            font-size: 18px;

            color: whitesmoke;

            &:hover {
                color: rgb(247, 149, 149);
            }

            animation: trans 1s linear infinite;

            @keyframes trans {
                0% {
                    transform: rotateZ(0deg);
                }

                100% {
                    transform: rotateZ(360deg);
                }
            }
        }

        .title {
            box-sizing: border-box;
            position: absolute;
            top: 25px;
            font-size: 16px;
            font-weight: bold;
            color: whitesmoke;
            z-index: 9;
            width: 100%;
            height: 0;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        animation: into 1s cubic-bezier(0.165, 0.84, 0.44, 1);
        @keyframes into {
            0% {
                transform: translateY(700px);
            }

            100% {
                // transform: translateY(1500px);
            }
        }
    }

    .setting-box-anima {
        animation: leave 1s cubic-bezier(0.165, 0.84, 0.44, 1);

        @keyframes leave {
            0% {
                // transform: translateY(700px);
            }

            100% {
                transform: translateY(-700px);
            }
        }
    }

    .change-bg {
        width: 100%;
        position: absolute;
        bottom: 10px;

        .upload-icon {
            color: whitesmoke;
            font-size: 30px;
            cursor: pointer;
        }
    }

    .bg-img {
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        background-image: url("@/assets/pix1001_4.jpg");

        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;

        img {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            object-fit: cover;

            border-top: 50px solid #3d3b4f;
            border-left: 10px solid #3d3b4f;
            border-right: 10px solid #3d3b4f;
            border-bottom: 50px solid #3d3b4f;
        }

        video {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            object-fit: cover;

            border-top: 50px solid #3d3b4f;
            border-left: 10px solid #3d3b4f;
            border-right: 10px solid #3d3b4f;
            border-bottom: 50px solid #3d3b4f;
        }
    }
}
</style>
